<template>
  <div id="cv-item">
    <div class="item-wrap">
      <div class="title">
        <div class="der"></div>
        <div class="title-content">{{ prop.label }}</div>
      </div>
      <div class="item" v-for="item in prop.list" :key="item.title">
        <div class="dot"></div>
        <div class="content">{{ item.title }}</div>
      </div>
 
    <a-divider />
    </div>
  </div>
</template>
 
<script setup lang='ts'>
  const prop =defineProps(['label','list'])
</script>

<style lang="less" scoped>
.title {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  .der {
    width: 6px; 
    height: 19px;
    background: #209EE4;
    border-radius: 2px 2px 2px 2px;
    margin-right: 5px;
  }

  .title-content {
    font-weight: 500;
    font-size: 18px;
    color: #333333;
    line-height: 21px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
}

.item {
  display: flex;
  align-items: center;
  margin-top: 10px;
  .dot {
    width: 5px;
    height: 5px;
    background-color: #666;
    border-radius: 50%;
    margin-right: 8px;
  }
}
</style>